<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        <a href="./01 webStorage.html">同级</a>
        <a href="../../day11/html/01 复习.html">同站点</a>
    </p>
    <button class="add">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">遍历</button>
</body>
<script>
    // cookie的缺点
    // cookie的缺点主要集中于安全性和隐私保护
    // 1. cookie可能被禁用
    // 2. cookie不能跨浏览器 / 不能跨网站
    // 3. cookie可能被删除
    // 4. cookie安全性不够高
    // 5. 在浏览器向服务器发送请求时  cookie会随着请求(请求可以携带一定的数据)一同发送给服务器, 会影响请求和响应的速率  (优点: 可以携带一部分数据 缺点: 有cookie,必须带)
    // 6. cookie 存储大小为4k ,  cookie的存储条数 一般为50条


    // WebStorage  网页存储(H5新增)
    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

    // WebStorage两个主要目标：
    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和  sessionStorage（会话存储）

    // 注意:
    // 1. WebStorage数据默认存储在站点的根目录 => 站点下的所有页面均可以访问
    // 2. 官方提供了操作数据的API(属性和方法),也可以使用对象的相关语法 新增,删,修改,查找
    // 3. localStorage（本地存储）和  sessionStorage 虽然是对象  => 但是它的键值只能为字符串类型 => 其他类型会隐式转字符串  => 解决方法同cookie

    // 如何查看localStorage（本地存储）和  sessionStorage（会话存储）
    // 1. 手动查看(代码调试) => 开发者工具 => application => Storage  => localStorage/sessionStorage（会话存储）

    // 2. JS查看  => localStorage/sessionStorage  全局对象,可以直接访问

    // 官方提供了操作数据的API(属性和方法)
    // length   保存数据的数量
    // setItem(key, value) —— 保存数据，以键值对的方式存储信息
    // getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key) —— 删除单个数据，根据键值移除对应的信息
    // clear() —— 删除所有的数据
    // key(index) —— 获取某个索引的key

    // 也可以使用对象的相关语法 新增,删,修改,查找




    // 对比localStorage和sessionStorage
    // localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
    // localStorage除非主动删除数据，否则数据永远不会消失。
    // 应用: 手机app等  => 适合长期保存在本地的数据

    // sessionStorage的生命周期是仅在当前窗口会话下有效,关闭会话窗口就失效了。 (同网站,同窗口)
    // sessionStorage引入了一个“浏览器窗口会话”的概念，sessionStorage是在同源(同一个域名下)的窗口中始终存在的数据。
    // 只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源(同一个服务器目录/相同的网站)另一个页面，数据依然存在。
    // 但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开新的窗口但是同一个页面，sessionStorage也是不一样的。
    // 应用: 敏感账号一次性登录  


    // console.log(window.localStorage);
    console.log(window.sessionStorage);


    var addBtn = document.getElementsByClassName("add")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];
    var keyBtn = document.getElementsByClassName("key")[0];


    addBtn.onclick = function () {
        sessionStorage.setItem("user", "a123123");
        sessionStorage.setItem("pwd", "123123");
        sessionStorage.phone = "17386141517"
        sessionStorage.email = "123123@qq.com";

        // 存数组和对象之前 先转化为JOSN字符串,在存储(存储的是json字符串)
        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        sessionStorage.setItem("arr", JSON.stringify(arr));
        sessionStorage.setItem("obj", JSON.stringify(obj));

        console.log(window.sessionStorage);
    }

    getBtn.onclick = function () {
        console.log(sessionStorage.getItem("user"));
        console.log(sessionStorage.getItem("pwd"));
        console.log(sessionStorage.phone);
        console.log(sessionStorage.email);

        // 直接取值是json字符串
        // console.log(sessionStorage.getItem("arr"));
        // console.log(sessionStorage.obj);

        // 直接取值是json字符串  先解析为数组或对象再使用
        var arr1 = JSON.parse(sessionStorage.getItem("arr"));
        console.log(arr1);
        var obj1 = JSON.parse(sessionStorage.obj);
        console.log(obj1);
    }

    editBtn.onclick = function () {
        sessionStorage.setItem("user", "bbb123123");
    }

    delBtn.onclick = function () {
        // 单删
        // sessionStorage.removeItem("user");
        // sessionStorage.removeItem("pwd");
        // delete sessionStorage.phone;
        // delete sessionStorage.email;
        // delete sessionStorage.arr;
        // delete sessionStorage.obj;

        // clear() 全删
        sessionStorage.clear();
    }

    keyBtn.onclick = function () {

        // for ... in 遍历sessionStorage(对象)   => 会出现对于属性
        // for(var key in sessionStorage){
        //     console.log(key);
        // }

        // key() 传入一个下标,返回下标对应的key
        for (var i = 0; i < sessionStorage.length; i++) {
            var key = sessionStorage.key(i);
            console.log(key, sessionStorage.getItem(key), sessionStorage[key]);
        }


    }



</script>

</html>